<link rel="stylesheet" href="css/app.css">
<style type="text/css">
.weui_mask_transition {
	display: none;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: background .3s;
	transition: background .3s;
}

.weui_fade_toggle {
	background: rgba(0, 0, 0, 0.6);
}

.weui_actionsheet_toggle {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}

.weui_actionsheet_menu {
	background-color: #FFFFFF;
}

.weui_actionsheet_cell:before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	border-top: 1px solid #D9D9D9;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
	-ms-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.weui_actionsheet_cell:first-child:before {
	display: none;
}

.weui_actionsheet_cell {
	position: relative;
	padding: 10px 0;
	text-align: center;
	font-size: 18px;
}

.weui_actionsheet_cell.title {
	color: #999;
}

.weui_actionsheet_action {
	margin-top: 6px;
	background-color: #FFFFFF;
}

img {
	transform: scale(1); /*图片原始大小1倍*/
	transition: all ease 0.5s;
} /*图片放大所用时间*/
img.active {
	transform: scale(2); /*图片需要放大3倍*/
	position: absolute;
	left:20%;
	/*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/
	z-index: 100;
}
</style>

</head>
<div id="abc">
<div id="actionSheet_wrap">
	<header>
		<p id="user-name" class="data-name">{{data.nickname}}</p>
		<img id="avt" class="data-avt" v-bind:src="data.avatar">
	</header>
	<div id="main">
		<div>
			<div id="list" v-for="(dynamic,index) in dynamics" >
				<ul>
					<li>
						<div class="po-avt-wrap">
							<img class="po-avt data-avt" v-bind:src="dynamic.avatar">
						</div>
						<div class="po-cmt">
							<div class="po-hd">
								<p class="po-name">
									<span class="data-name">{{dynamic.nickname}}</span>
								</p>
								<div class="post">
									<p>{{dynamic.content}}</p>
									<p>
										<img v-bind:src="dynamic.image" style="width: 150px;">
								</div>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
</div>
</div>
	<script type="text/javascript">
		new Vue({
			el : "#abc",
			data : {
				data:"",
				dynamics:[],
			},
			mounted() {
				axios.post(
						"/user/selectMyByUid"
				).then(res=>{
					console.log(res.data.data);
					this.data=res.data.data;
				});
				axios.post(
						"/user/findMyFriendsDynamic"
				).then(res=>{
					console.log(res.data.data);
					this.dynamics=res.data.data;
				});
			}
		});
	</script>